<template>
  <div class="home">
    <el-card>
      <div slot="header">
        <span>Vue2 + ElementUI + Axios 快速启动项目</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover">
            <h3>Vue 2.6.14</h3>
            <p>渐进式JavaScript框架</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <h3>Element UI 2.15.14</h3>
            <p>基于Vue 2.0的桌面端组件库</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <h3>Axios</h3>
            <p>基于Promise的HTTP库</p>
          </el-card>
        </el-col>
      </el-row>
      
      <el-divider></el-divider>
      
      <h3>项目特性</h3>
      <ul>
        <li>✅ Vue2 + Vue Router</li>
        <li>✅ ElementUI 组件库</li>
        <li>✅ Axios 请求封装</li>
        <li>✅ 统一错误处理</li>
        <li>✅ 请求/响应拦截器</li>
        <li>✅ 自动token处理</li>
        <li>✅ 开发代理配置</li>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px 0;
  font-size: 16px;
}
</style>